<template>
  <Suspense>
    <template #default>
      <!-- 这里是异步组件的插槽 -->
      <AsyncComponent />
    </template>
    <template #fallback>
      <!-- 这里是加载期间和错误时的回退内容 -->
      <div>Loading...</div>
    </template>
  </Suspense>
</template>

<script setup>
import { defineAsyncComponent } from 'vue'

const AsyncComponent = defineAsyncComponent(() =>
  import('./AsyncComponent.vue').catch((error) => {
    // 处理异步加载错误
    console.error('Failed to load component:', error)
    return () => '<div>Error loading component</div>'
  })
)
</script>
